<template>
    <div class="page-wrap">
        <sys-set @success="sysSetChange">
            <a-input-search
                allowClear
                placeholder="请输入名称关键字查询"
                enter-button
                @search="(val) => handleSearch({ name: val })"
                style="width: 348px; margin-top: 2px"
            />
        </sys-set>
        <flexbox justify="space-between" align="center" class="table-toolbar-wrap">
            <div class="table-title">需求变更列表</div>
        </flexbox>
        <custom-table
            autoResize
            rowKey="id"
            size="small"
            :loading="loading"
            :columns="tableColumns"
            :data-source="list"
            :pagination="paginationConfig"
            @change="handleTableChange"
        >
            <template #versionTitle="{ record }">
                <a @click="showDetail(record)">
                    {{ record.title }}
                </a>
            </template>
            <template #changeType="{ record }">
                {{ $filters.valToNameFilter('changeType', record.changeType) }}
            </template>
            <template #level="{ record }">
                {{ $filters.valToNameFilter('changeLevel', record.level) }}
            </template>
            <template #status="{ record }">
                {{ $filters.valToNameFilter('changeRequireStatus', record.status) }}
            </template>
            <template #action="{ record }">
                <a @click.stop="showDetail(record)">详情</a>
            </template>
        </custom-table>
    </div>
</template>

<script lang="ts">
import SysSet from '@/components/SysSet/SysSet.vue';
import CustomTable from '@/components/Table/CutomTable.vue';
import { useMountedAndActivated } from '@/hooks/common/useMountedAndActivated';
import { useTableLoading, usePagination, useTableColumns, useTableData, useTableFormSearch } from '@/components/Table/hooks';
import { useRouter } from 'vue-router';
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'requireChangeList',
    components: {
        SysSet,
        CustomTable
    },
    setup() {
        const router = useRouter();
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns } = useTableColumns('requireChange');
        const { list, getList, handleTableChange, setSearchQuery } = useTableData(setLoading, paginationConfig, setPaginationConfig, 'requireChange');
        const { handleSearch } = useTableFormSearch(setPaginationConfig, setSearchQuery, getList);
        const showDetail = (info: any) => {
            const { id, status } = info;
            if (status === '1') {
                router.push({
                    path: '/requireChange/createRequireChange',
                    query: {
                        id
                    }
                });
            } else {
                router.push({
                    path: '/requireChange/changeDetail',
                    query: {
                        id
                    }
                });
            }
        };
        const sysSetChange = (checkedSystem = null) => {
            setPaginationConfig({
                current: 1
            });
            setSearchQuery({
                system: checkedSystem
            });
            getList();
        };
        useMountedAndActivated(getList, false);
        return {
            sysSetChange,
            showDetail,

            list,
            tableColumns,
            loading,
            paginationConfig,
            handleTableChange,
            handleSearch
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 8px 24px 12px 24px;
    background: #fff;
    .table-toolbar-wrap {
        margin: 16px 0;
    }
    .table-title {
        font-size: 16px;
        font-weight: bold;
    }
    ::v-deep(.ant-input-search) {
        height: 32px;
    }
}
</style>